﻿
<template>
  <div class="user_index" ref="user_index" v-if="user_index_show_data">
    <!--<header_h></header_h>-->

    <!--<div class="cover_native_nav" v-bind:class="{nav_back_color:change_cover_native_nav_show}" v-bind:style="{backgroundColor:hsl_bg}">-->
      <!--&nbsp;-->
    <!--</div>-->
    <header ref="header" v-on:click.self="set_user_info_f">
      <!-- 设置s -->
      <img src="../../static/img/reset.png" class="rest_p" >

      <!-- 设置e -->
      <!-- header_left s-->
      <div class="header_left">
        <img v-bind:src="user_list.image|if_null" class="user_img" v-bind:onerror="default_logo"/>
        <div class="user_id">
            ID:{{user_list.ident|if_null}}
        </div>
        <div class="header_left_bottom_btn">
          <div class="header_bz header_left_btn_base">
            备注
          </div>
          <div class="more header_left_btn_base">
            more
          </div>
        </div>
     </div>
      <!-- header_left e -->
      <!-- header right s -->
      <div class="header_right">
        <div class="header_right_header">
          <div class="count_num">
            积分：{{user_list.integral|if_null}}
          </div>
          <div class="header_right_dh header_right_base" v-if="ad_visit">
            兑换
          </div>
          <div class="header_right_cz header_right_base" v-if="ad_visit">
            充值
          </div>
       </div>
        <!-- header_table s -->
        <div class="header_table">
          <div class="header_table_header">
                {{user_list.school.schoolName|if_null}}
          </div>
          <div class="header_table_middle">
            <div class="header_table_mid_box">{{user_list.penName|if_null}}</div>
            <div class="header_table_mid_box">{{user_list.sex|if_null}}</div>
            <div class="header_table_mid_box">{{user_list.constellation|if_null}}</div>
          </div>
          <div class="header_table_address">
                {{user_list.address|if_null}}
          </div>
        </div>
        <!--header_table e-->
      </div>
      <!-- header right e -->
    </header>
    <div style="background-color: #2aa1a5;color:black;">sign</div>
    <div class="cover_container" v-bind:style="{top:divTop}" ref="contaienr" >
      <!-- nav s -->
      <div class="nav" v-bind:class="{show_nav:show_nav_data}" v-if="ad_visit">
        <img v-bind:src="list.list" class="nav_box" v-for="list in img_list"/><!--
        --><img src="../../static/img/user_index/21.png" class="nav_click_btn_close" v-on:click="nav_close" v-show="show_nav_data">
        <img src="../../static/img/user_index/20.png" class="nav_click_btn" v-on:click="nav_more" v-show="!show_nav_data">
      </div>
      <!-- nav e -->
      <!-- card s -->
      <div class="card_wrapper">
        <!-- single card box s -->
            <div class="card_wrapper_box" v-for="user_list in card_list">
                 <div class="card_header">
                   {{user_list.groupName|if_null}}
                   <!--<div class="add_advanture" v-on:click="add_ad(user_list.groupId,user_list.coveId)" v-if="ad_visit">  + </div>-->
                 </div>
                 <scroll :card_mess="user_list.adventurecards" :user_list="user_list"></scroll>
            </div>
        <!-- single card box e -->
      </div>
      <!-- card e -->
      <!-- bottom s -->
      <div class="user_bottom_show">
      </div>
      <!-- bottom e -->
   </div>
    <!-- input_card btn s -->
    <input_card v-show="show_input_card" class="input_card" @show="c_show_nav"></input_card>
    <!-- input_card btn e -->
    <!-- bottom -btn s -->
    <div class="bottom_nav">
      <img src="../../static/img/user_index/more_c.png" class="more_c m_r"  v-on:click="show_classify_f">
      <img src="../../static/img/user_index/bottom_add_c.png" class="midd_m" v-on:click="c_show_input">
      <img src="../../static/img/user_index/top.png" class="more_c m_l" v-on:click="go_top">
    </div>
    <!-- bottom btn e -->
    <!-- classify s -->
    <div class="classify clearfix" v-show="classify_show" v-on:click="show_classify_f">
         <div class="classify_inner clearfix" ref ="classify">
           <div class="classify_box" v-for="list in classify_list" v-onclick="classify">
                {{list.grouping.group|if_null}}
           </div>
         </div>
    </div>
    <!-- 设置用户s -->
    <div class="set_user_info" v-show="set_user_info" v-on:click.self="hide_user_info" ref="wrap_user_info">
      <header ref="header" class="border_line">
        <!-- 设置s -->
        <!--<img src="../../static/img/reset.png" class="rest_p">-->
        <!-- 设置e -->
        <!-- header_left s-->
        <div class="header_left">
          <img v-bind:src="user_list.image|if_null" class="user_img" v-bind:onerror="default_logo" v-on:click="change_user_img"/>
          <div class="user_id">
            ID:{{user_list.ident|if_null}}
          </div>
          <div class="header_left_bottom_btn" style="margin-bottom:0.5rem">
            <div class="header_bz header_left_btn_base">
              备注
            </div>
            <div class="more header_left_btn_base">
              more
            </div>
          </div>
        </div>
        <!-- header_left e -->
        <!-- header right s -->
        <div class="header_right ">
          <div class="header_right_header">
            <!--<div class="count_num">
              积分：{{user_list.integral|if_null}}
            </div>-->
            <!--<div class="header_right_dh header_right_base" v-if="ad_visit">
              兑换
            </div>
            <div class="header_right_cz header_right_base" v-if="ad_visit">
              充值
            </div>-->
          </div>
          <!-- header_table s -->
          <div class="header_table" style="margin-top:2rem;">
            <div class="header_table_header">
              {{user_list.school.schoolName|if_null}}
            </div>
            <div class="header_table_middle">
              <div class="header_table_mid_box">{{user_list.penName|if_null}}</div>
              <div class="header_table_mid_box">{{user_list.sex|if_null}}</div>
              <div class="header_table_mid_box">{{user_list.constellation|if_null}}</div>
            </div>
            <div class="header_table_address">
              {{user_list.address|if_null}}
            </div>
          </div>
          <!--header_table e-->
        </div>
        <!-- header right e -->
      </header>
    </div>
    <!-- 设置用户e -->
    <!-- classify e -->
    <FooterMenu></FooterMenu>
    <!-- change_user_info s-->
    <input type="file" name="name" value="" ref="change_user_info"/>

    <!-- change_user_info e -->
   </div>
</template>
<script>
  import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';
  //limit_Scroll
  import '../../static/css/mint-ui/style.css'
  import MintUI from 'mint-ui'
  import VueScroller from 'vue-scroller'
  import limit_scroll from "../../static/js/limit_scroll.js";
  import { Toast, Indicator } from 'mint-ui';
  import qs from 'qs';
  import Vue from "vue";
  import "../../static/css/user_index/user_index.css";
  import scroll from "./scroll/nav_gift_scrol.vue";
  import  "../../static/css/Adventure/Adventure.css"
  import input_card from "./card_input.vue"
  import axios from 'axios'
  import filter from "../filter/filter.js"
  import "../../static/css/Adventure/user_index_ad.css"
  import FooterMenu from "../index/FooterMenu.vue";
  import "../../static/js/use_rem.js";
  axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8';
  import common from "../common/common.js"
  import header_h from "../common/header_other/Header_other.vue"
  Vue.prototype.$http = axios;
  Vue.use(VueScroller);
  Vue.use(MintUI);

  export default {
    name: 'Detail_Exchange',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        divTop: "",
        img_list: [],
        show_nav_data: false,
        show_input_card: false,
        user_list: {},//用户信息
        default_logo: "wx.yizhiweimeng.com/static/static/img/icon_man.png",
        classify_show: false,
        user_id: "",
        class_list: "",
        classify_list: "",
        card_list: "",
        user_index_show_data: true,
        ad_visit:true,
        other_data: "",//scroll other_data
        cover_native_nav_show: false,
        hsl_bg: "",
        set_user_info:false
      }
    },
    beforeCreate: function () {
      //获取用户 信息
      ///api/user / getUserById
    },
    created: function () {

    },
    methods: {
      change_user_img: function () {
        this.$refs.change_user_info.click();
      },
      hide_user_info: function () {
        this.set_user_info = false;
      },
      set_user_info_f: function () {
        this.set_user_info = true;
      },
      change_nav_color: function () {
        //hsl :24 63% 33% 1

      },
      change_cover_native_nav_show: function () {
        this.cover_native_nav_show = true
      },
      show_classify_f: function () {
        Indicator.open();
        let base_url = common.get_base_url();
        let id = localStorage.getItem("user_id");
        id = JSON.parse(id).id;
        console.log("user_index_______________________________");
        console.log(JSON.parse(id));
        console.log(id);
        //  / api / user / personalHomepage / getAdventureCardsType
        this.$http.post("/yizhiweimen" + '/api/user/personalHomepage/getAdventureCardsType',
          qs.stringify(
            {
              'uid': id,
            })
          )
          .catch((thrown) => {
          }).then((e) => {
           Indicator.close();
           this.classify_list = e.data
           this.classify_show = !this.classify_show
          })
      },
      add_ad: function (gid, cid) {
        Indicator.open();
        sessionStorage.setItem("gid",gid)
        sessionStorage.setItem("cid",cid)
        this.$store.dispatch("thom_redirect",
          { name: "/Advanture", router: this.$router });
      },
      nav_more: function () {
        this.show_nav_data = true;
      },
      nav_close: function () {
        this.show_nav_data = false
      },
      c_show_nav: function () {
        this.show_input_card= false
      },
      c_show_input: function () {
        this.show_input_card = true;
      },
      go_top: function () {
        document.documentElement.scrollTop = 0;
        document.body.scrollTop = 0;
      }
    },
    mounted: function () {
      console.log("this.$refs")
      console.log(this.$refs)

      this.$nextTick(() => {
        console.log("222222222222sdasdasdasdasdassssssssssssssssssssss")
        this.$refs.change_user_info.addEventListener("click", (e) => {

          console.log("11111")
          console.log(e.target.value.files[0]);

        })


      })



      mui.plusReady(function () {
        plus.navigator.isImmersedStatusbar();//判断是否沉浸式
        console.log("getStatus_Bar______")
        console.log(plus.navigator.getStatusBarBackground())
        plus.navigator.setStatusBarStyle("light");
      })

      //滑动改变头部 颜色
      document.addEventListener("scroll", function () {
        mui.plusReady(function () {
          plus.navigator.isImmersedStatusbar();//判断是否沉浸式

          let scroll_top = document.body.scrollTop;
          //滑过 10 就 改变 nav 的字体颜色
          //if (scroll_top >= 10) {
          //  plus.navigator.setStatusBarStyle('dark');
          //  this.change_cover_native_nav_show = true;


          //} else {
          //  plus.navigator.setStatusBarStyle('light');
          //  this.change_cover_native_nav_show = false;
          //}
        })

      })
      let base_url = common.get_base_url();
      Indicator.open();
      sessionStorage.setItem("add_card_list","")
      /*let id = location.search.split("user_id=")[1];
      this.user_id = id;*/
      if (sessionStorage.getItem("ad_visit") == 'false') {
        this.ad_visit = false
      }
      let id = localStorage.getItem("user_id");
      console.log("id___________________")
      console.log(id)
      console.log(JSON.parse(id))
      this.user_id = id;
      this.user_list = JSON.parse(id);
      console.log("user_list___________________id+++++++++++++++++");
      console.log(JSON.parse(id));
      //this.$http.get(base_url+'/api/user/getUserById?id=' + id)
      //  .catch((thrown) => {
      //    alert("getUserById")
      //    alert(thrown)
      //}).then((e) => {
      //    Indicator.close();
      //    this.user_list = e.data;
      //    sessionStorage.setItem("user_list_data", JSON.stringify(e.data));
      //})
      ///api/user / adventurecard / getAdventurecard
      let u_id = this.user_list.id
      this.$http.post("/yizhiweimen"+'/api/user/personalHomepage/getPageHomeByUser',
        qs.stringify(
          {
            'Uid': u_id,
          })
        )
        .catch((thrown) => {
          console.log(thrown)
        }).then((e) => {
          Indicator.close();
          if (!e.data) return;
          //this.card_list = e.data
          let e_data_len = e.data.length;
          for (let x = 0; x < e_data_len; x++) {
            for (let y = 0; y < e.data[x].adventurecards.length; y++){
              if (y == 1) {
                e.data[x].adventurecards[y].act = true
              } else if (e.data[x].adventurecards.length == 1) {
                e.data[x].adventurecards[0].act = true
              } else {
                e.data[x].adventurecards[y].act = false
              }
             }
          }
          this.card_list = e.data;
          this.user_index_show_data = true
        })
      //limit_scroll(this.$refs.classify , this.$refs.user_index)
      //nav 图标
      let list = [];
      for (let x = 1; x < 20; x++) {
       var obj = {
         list: "./static/img/user_index/" + x + ".png",
         click_btn:false
       }
       list.push(obj);
      }
      this.img_list = list;
      //this.divTop = window.getComputedStyle(this.$refs.header).height;
    },
    components: {
      scroll,
      input_card,
      FooterMenu,
      header_h
    }
  }
</script>

<style scoped>
  .border_line{
    padding:0;
    border:1px dashed #fff;
    /*margin: 0 auto;
    width:90%;*/
    width:98%;
    border-radius:2vw;
    margin:1rem auto 0;
  }
  .set_user_info {
    top: 0;
    left: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: rgba(135, 73, 31, 0.26)
  }
  .rest_p {
    width: 7vw;
    height: 7vw;
    position: absolute;
    top: 8vw;
    left: 2vw;
  }
  .cover_native_nav {
    background-color: rgba(0,0,0,0);
    width: 100%;
    height: 5.3vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    transition: transform 2s ease 0s,background-color 2s ease 3s
  }

  .nav_back_color {
    background-color: #87491f;
  }

  /*user_bottom_shows*/
  .user_bottom_show {
    height: 10vw;
  }
  /*user_bottom_showe*/
  header {
    padding-top: 5.3vw;
    /*position:fixed;*/
  }
  .header_right_header {
    justify-content: space-between;
  }
  .classify_box {
    text-align: center;
    font-size: 1rem;
    color: #fff;
    height: 10.4vw;
    line-height: 10.4vw;
    width: 86vw;
    background-color: #96e54c;
    border-radius: 1vw;
    margin:3.7vw auto 0;
  }
  .classify_box:nth-last-child(1){
    margin-bottom:3.7vw;
  }
  .classify_inner {
    height:80vh;
    overflow-y:scroll;
    width: 95vw;
    margin: 7.3vw auto;
    background-color: #fff;
    border-radius: 1vw;
  }
  .classify {
    height: 100%;
    width:100%;
    position: fixed;
    z-index:2000;
    background-color:rgba(0,0,0,0.6);
    top: 0;
    left: 0;
  }
  .box {
    height:37vw;
  }
  .box_act{
    height:40vw;
  }
  .input_card {
    top: 0;
    left: 0;
    z-index: 100;
    position: fixed;
  }
  .user_img {
    margin:1.2rem 3.2vw 0.25rem 7vw;
  }
  .header_table{
    margin-top:0.5rem;
  }
  .header_table_address{
    height:2.9rem;
  }
  .header_left_btn_base {
    line-height: 1.2rem;
    height: 1.2rem;
    border-radius: 1vw;
  }
  .header_left_bottom_btn {
    justify-content:center;
  }
  .header_table_address {
    height: 15.4vw;
  }
  .header_table_mid_box {
    height: 7.2vw;
    line-height: 7.2vw;
  }
  .count_num {
    margin-top: 0.6rem;
    width: auto;
    padding-left:1vw;
    padding-right:1vw;
    height: 6.9vw;
    line-height: 6.9vw;
    color:#fff;
    font-size:4.2vw;
    border-radius: 1.2vw;
    border: 1px solid #fff;
    margin-right: 6.5vw;
  }
  .user_id {
    margin-top: 0.56rem;
    margin-bottom: 0.6rem;
    font-size: 0.9rem;
    color: #fff;
    margin-left: 5.6vw;
  }
  .header_left_btn_base{
    height:6.4vw;
    line-height:6.4vw;
  }
  .header_right_base{
    height:7.4vw;
    line-height:7.4vw;
    margin-top:0.6rem;
  }
  .user_img{
    width:20vw;
    height:20vw;
  }
  .nav_click_btn {
    top: 0.5vw;
    right: 0.8vw;
  }
  .wrapper{
    padding-top:0.5rem;
    background-color:#fff;
  }
  .cover_container .show_nav {
    height: auto;
  }
  .cover_container{
    /*position:relative;*/
  }

</style>
